<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('地产集团列表')"/>
</head>
<style>
    img {
        width: 100%;
        height: 100%;
    }

    .spot {
        position: absolute;
        width: 3.7%;
        height: 6.3%;
        border-radius: 50%;
        cursor: pointer;
    }

    .spot1 {
        left: 14.7%;
        top: 17%;
    }

    .spot2 {
        right: 26%;
        top: 13%;
    }

    .spot3 {
        left: 13%;
        top: 39%;
    }

    .spot4 {
        right: 22%;
        top: 34.5%;
    }

    .spot5 {
        left: 7.5%;
        top: 60%;
    }

    .spot6 {
        right: 17.5%;
        top: 59.5%;
    }

    .spot7 {
        left: 9%;
        top: 75%;
    }
    .spot8 {
        right: 12.5%;
        top: 79%;
    }

    .video {
        position: absolute;
        width: 40%;
        top: 20%;
        left: 28%;

        display: none;
    }
</style>
<body class="gray-bg">
<div class="col-sm-12 select-table table-striped">
    <img src="../img/demo.jpg" alt="">
    <div class="spot spot1" onclick="sw('经营共享')"></div>
    <div class="spot spot2" onclick="sw('智慧安防')"></div>
    <div class="spot spot3" onclick="sw('智慧车场')"></div>
    <div class="spot spot4" onclick="sw('智慧大楼——智能门禁')"></div>
    <div class="spot spot5" onclick="sw('智慧设备')"></div>
    <div class="spot spot6" onclick="sw('智能家居')"></div>
    <div class="spot spot7" onclick="sw('周期作业')"></div>
    <div class="spot spot8" onclick="sw('最后一公里宅配')"></div>
    <div class="video">

    </div>
</div>

<th:block th:include="include :: footer"/>
<script>

    $(function () {
        $("img").click(function () {
            $(".video").empty();
            $(".video").css('display','none');
        })
    })

    function sw(url) {
        $(".video").css('display','block');
        $(".video").empty();
        $(".video").html('<video loop="loop" style="border: 2px solid #1E90FF; border-radius: 5px;" controls="controls" autoplay="autoplay" src="http://223.244.237.208:1889/viedo/' + url + '.mp4"></video>')
    }
</script>
</body>
</html>